import React from 'react'

import {WeaTable,WeaPopoverHrm} from "ecCom";
import MarqueeCom from "../../../portal/elements/components/common/MarqueeCom";


export default class ContainerViewExtend extends React.Component{


    handlerOnClickWorkflowTitle = (link)=>{
        let page = window.open(link,'_blank')
        setTimeout(()=>{
            window.portalTs.element.workflow.reflush()
        },3000)

        let temp = setInterval(()=>{
            if(page.closed){
                clearInterval(temp)
                window.portalTs.element.workflow.reflush()
            }
        },1000)
    }


    render(){
        const {data,tabId} = this.props
        const {items,setting,showFields,style}  = data
        for(let tabId in items){
            if(items.hasOwnProperty(tabId)){
                let showField = []
                let columns = []
                let setting = {}
                if(data.items && data.items[tabId] && data.items[tabId].setting.showField){
                    setting = data.items[tabId].setting
                    showField = data.items[tabId].setting.showField
                }
                columns.push({"dataIndex":'icon',"key":'icon',"width":'8px',"render": (text) => <img src={style.iconEsymbol} style={{'margin-bottom':'4px'}}/>})
                for(let i in showField){
                    if(showField.hasOwnProperty(i)){
                        if(showField[i] == 113 && (data.setting.showsysname == '0') ){
                            continue;
                        }
                        for(let j in showFields){
                            if(showFields.hasOwnProperty(j)){
                                if(showField[i] == showFields[j].id){
                                    if(showFields[j].fieldColumn=='requestname'){
                                        columns.push({"dataIndex":showFields[j].fieldColumn,"key":showFields[j].fieldColumn,"width":showFields[j].width,"render": (text) => {return (
                                                <div>
                                                    <div title={$(text.name).text()} className="font" style={{display:'inline-block','vertical-align':'middle','max-width':'calc(100% - 10px)',cursor:'pointer','overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}} onClick={()=>{this.handlerOnClickWorkflowTitle(text.link)}} dangerouslySetInnerHTML={{__html:text.name}}></div>
                                                    {
                                                        text.img && data.setting.remindLogo == '1' ? <img src={text.img} style={{'vertical-align':'middle'}}/> : ''
                                                    }
                                                </div>
                                            )}})
                                    }else if(showFields[j].fieldColumn=='creater'){
                                        columns.push({"dataIndex":showFields[j].fieldColumn,"key":showFields[j].fieldColumn,"width":showFields[j].width,"render": (text) => {return <div title={text.name}  className="font"  style={{'overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}}>  <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@1xa2ta@creater`} /><a onClick={e => {javaScript:openhrm(text.userid);window.pointerXY(e)}}>{text.name}</a></div>}})
                                    }else{
                                        columns.push({"dataIndex":showFields[j].fieldColumn,"key":showFields[j].fieldColumn,"width":showFields[j].width,"render": (text) => <div title={text}  className="font"  style={{'overflow':'hidden','text-overflow':'ellipsis','white-space':'nowrap'}}>{text}</div>})
                                    }

                                }
                            }

                        }
                    }

                }

                items[tabId].columns = columns
            }

        }


        let content = null
        let item
        if(items.length > 0 && items.find((element)=>(element.id == tabId))){
            item =items.find((element)=>(element.id == tabId))
            let {rollingDirection} = item.setting
            const scolltype = ['up','down','left','right'];
            const scollId = [3,4,1,2]
            let srollIndex= -1
            for(let i = 0 ;i< scollId.length ;i++){
                if(rollingDirection == scollId[i]){
                    srollIndex = i
                    break;
                }
            }
            if(srollIndex == -1){
                content = <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@plt95j`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.data} />
            }else{
                content = <MarqueeCom ecId={`${this && this.props && this.props.ecId || ''}_MarqueeCom@qocd13`} tabdata={{data:item.data}} eid={data.id} scolltype={scolltype[srollIndex]}>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@u43spf`} columns={item.columns} showHeader={false} pagination={false} dataSource={item.data} />
                          </MarqueeCom>
            }




        }

        return (
            <div style={{height:'100%'}}>

                {content}
            </div>
        )
    }

}
